<link rel="stylesheet" href="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/share/jqueryui/development-bundle/themes/base/jquery.ui.all.css">
<script src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/share/jqueryui/development-bundle/ui/jquery.ui.core.js"></script>
<script src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/share/jqueryui/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/share/jqueryui/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/share/jqueryui/development-bundle/ui/jquery.ui.sortable.js"></script>
<script src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/share/jqueryui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/share/jqueryui/development-bundle/ui/jquery.ui.button.js"></script>
<script src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/share/jqueryui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/share/jqueryui/development-bundle/ui/jquery.ui.position.js"></script>
<script src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/share/jqueryui/development-bundle/ui/jquery.ui.dialog.js"></script>

<style type="text/css">
.qiang { background: #EEE; width: 976px; padding: 1em;}
.qiang ul { width: 660px;  overflow: auto; zoom: 1; }
.qiang ul li { 
	margin: 0.5em; 
	border: 1px solid orange; 
	background-color: #aa6; 
	color: blue; 
	width: 160px;
	height: 200px; 
	cursor: move; 
	float: left;
	position: relative;
}
.qiang ul li.holder { width: 160px; height: 200px; background-color: #ABB; border: 1px dotted red; }
.qiang ul li img { width: 150px; height: 150px; border-width: 0; margin-left:5px; margin-top:5px;}
.qiang ul li p { margin: 0; padding: 0; line-height: 20px; height:40px; overflow: hidden; }
.qiang ul li .edit { position: absolute; top: 1em; right: 1em; color: red; cursor: pointer; }
.qiang ul li .del { position: absolute; top: 1em; right: 4em; color: red; cursor: pointer; }
</style>
<script type="text/javascript">
$(function () {
	$('.qiang .items').sortable({
		'placeholder' : 'holder'
	});
	$('.qiang .items').disableSelection();
	$('#item-editor').dialog({
		width: 500,
		modal: true,
		autoOpen: false,
		buttons: {
			修改: function () {
				var sId = $('#item-edit-text-id').val();
				var sTitle = $('#item-edit-text').val();
				var sImage = $('#item-edit-image').val();
				var sCount = $('#item-edit-count').val();
				$('#title_'+sId).html(sTitle);
				$('#input_'+sId).val(sTitle);
				$('#preview-image-url-'+sId).attr('src', sImage);
				$('#image_'+sId).val(sImage);
				$('#count_'+sId).val(sCount);
				$(this).dialog('close');
			}
		}
	});

	$('.qiang .items .edit').click(function () {
		$('#item-editor').dialog('open');
		var sId       = $(this).attr('id').split('_')[1];
		var sTitle    = $('#title_'+sId).html();
		var sImage    = $('#image_'+sId).val();
		var sCount    = $('#count_'+sId).val();
		$('#item-edit-text').val(sTitle);
		$('#item-edit-image').val(sImage);
		$('#item-edit-text-id').val(sId);
		$('#item-edit-count').val(sCount);
	});

	$('.qiang .items .del').click(function () {
		var sure = confirm('是否确认删除？');
		if (sure == true)
		{
			var sId = $(this).attr('id').split('_')[1];
			$('#li_'+sId).remove();
		}
	});

	$('#goods_from').submit(function () {
			var count     = $('.goods_info_li').size();
			var max_count = <{$max_count}>;
			if(count > max_count)
			{
				alert('最多可推荐'+max_count+'件商品！');
				return false;
			}
			else if (count == 0)
			{
				alert('您还没有设置抢购商品');
				return false;
			}
			else
				return true;
	});
});
</script>
 
<form action="/qiang/set_qiang_list/<{$day}>" id="goods_from" name="frm" method="post">
<div class="qiang">
	<ul class="items">
	<{foreach from=$goods_list key=k item=it}>
		<li id='li_<{$it.goods_id}>' class="goods_info_li">
			<img src="<{if $it.large_cover_thumb == ''}><{$it.cover_thumb}><{else}><{$it.large_cover_thumb}><{/if}>" id="preview-image-url-<{$it.goods_id}>">
			<p class="t" id="title_<{$it.goods_id}>"><{if $it.qiang_title==''}><{$it.title}><{else}><{$it.qiang_title}><{/if}></p>
			<span class="edit" id="edit_<{$it.goods_id}>">编辑</span>
			<span class="del" id="del_<{$it.goods_id}>">删除</span>
			<input id="input_<{$it.goods_id}>" name="title_<{$it.goods_id}>" value="<{if $it.qiang_title==''}><{$it.title}><{else}><{$it.qiang_title}><{/if}>" type="hidden" />
			<input id="image_<{$it.goods_id}>" name="image_<{$it.goods_id}>" value="<{if $it.large_cover_thumb == ''}><{else}><{$it.large_cover_thumb}><{/if}>" type="hidden" />
			<input id="count_<{$it.goods_id}>" name="count_<{$it.goods_id}>" value="<{if $it.qiang_amount_orig == 0}>100<{else}><{$it.qiang_amount_orig}><{/if}>" type="hidden" />
		</li>
	<{/foreach}>
	</ul>

<link rel="stylesheet" type="text/css" href="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/sc/css/admin/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/sc/js/highslide/highslide.css" />
<script type="text/javascript" src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/sc/js/address.js"></script>
<script type="text/javascript" src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/sc/js/highslide/highslide-with-html.js"></script>
<script language="javascript" src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/sc/js/admin/jquery-ui.min.js"></script>
<script language="javascript" src="<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/sc/js/admin/datepicker-zh.js"></script>
<script type="text/javascript">
hs.graphicsDir = '<{$smarty.const._DOMAIN_SC_CDN_}>/upload/zx/sc/js/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';

$(document).ready(function() {
   $( "#WF_DateStart" ).datepicker({ buttonText: 'Choose' });
   $( "#WF_DateEnd" ).datepicker({ buttonText: 'Choose' });
 });
</script>

	<div id="item-editor" title="编辑抢购商品" style="width:400px;text-align:left;">
		<p>标题：<input id="item-edit-text" size=50 value="" /><input id="item-edit-text-id" type="hidden" value="" /></p>	
		<p>图片：<input id="item-edit-image" size=50 value="" style="margin-top:5px;" /></p>	
		<p>数量：<input id="item-edit-count" size=10 value="" style="margin-top:5px;" /></p>	
	</div>

</div>
<div style="test-align:center;"><input type="submit" value="保存" /></div>
</form>

